<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
      组件编写步骤： -- 以后都是按照这个步骤来实现
        编写组件结构 <template id="com"></template>
        定义组件 const Com =  {template:'#com',data(){return {} } 
        注册组件 Vue.component('组件名称',Com})
        使用组件 <div id="app"> <my-com></my-com> </div>
      全局注册组件：
        使用组件也是以标签的方式使用
      Vue.component(key,value)  // key：组件名称，value：结构+行为
        key的使用规则：
          a.-连缀   key:'my-com' 
          b.驼峰式  key:myCom
        value:特殊的vue的实例 - 组件 ，没有el选项，data必须是函数，返回一个对象，其余保持一致
      vue组件中data为什么必须是函数?
        组件是可以进行复用的,如果data直接写成对象,复用的时候会造成数据污染(复用后影响其他实例),因为对象是引用数据类型,
        data 方法返回一个对象作为组件的属性,这样做的目的是为了每一个组件实例都拥有独立的data属性
    -->
    <div id="app">
        <!-- 在这里调用 <my-com> 的组件 -->
        <my-com></my-com>  
    </div>
</body>
<script>
    // 要在页面中调用组件，就必须先注册组件

    // 1.全局注册组件
    Vue.component('my-com',{ // 参数1：key是组件名称，参数2是value：注意没有el选项，data是函数
       template:`<div>{{msg}}</div>`,  // template 是组件的页面模板 -- 如果template中代码量很大，可读性变差，就要抽离组件结构
       data(){
        return {
          msg:'hello component'
        }
       } 
    })
    new Vue({
        el:'#app',
    })
</script>
</html>